<template>

  <div>
    <el-header>
      <div>
        <tr>
          <th style="font: 5px; color: red">FdTeam OA</th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <router-link to="/home">
               <el-link class="icon" type="primary "   icon="el-icon-s-home" />
          </router-link>   &nbsp;&nbsp;&nbsp;&nbsp;
         
            <span class="el-dropdown-link">
              
            </span>
            <el-dropdown trigger="click">
    
               <el-link class="icon" style="color:orange"  icon="el-icon-s-order" />

              <el-dropdown-menu slot="dropdown"  class="el-dropdown-menu">
                <el-timeline-item class="el-timeline-item"
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp"
                >
                  {{ activity.content }}
                </el-timeline-item>
                设置菜单
              </el-dropdown-menu>
            </el-dropdown>
          &nbsp;&nbsp;
          <router-link to="/home/personalinfo">个人中心
          
          </router-link>
          &nbsp;&nbsp;&nbsp;
         <el-link type="primary">任务管理</el-link>
          &nbsp;
         <el-link type="primary">文档中心</el-link>
          &nbsp;

          <el-link class="icon"
            label="ltr"
            v-model="direction"
            @click="drawer = true"
            type="primary"
            icon="el-icon-s-grid"
            >全部应用</el-link
          >

          <el-drawer
            size="35%"
            title=""
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
          >
            <el-row class="demo-autocomplete">
              <el-col :span="12">
                <div class="sub-title"></div>
                <el-autocomplete
                  class="inline-input"
                  v-model="state1"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @select="handleSelect"
                ></el-autocomplete>
              </el-col>
            </el-row>
            <div id="a">
              <span id="a">常用菜单</span><br />
              <div id="a">
                <router-link to="/home">首页</router-link>
                <router-link to="/personalinfo">个人中心</router-link>

                <a href="">文档中心</a>
                <router-link to="/home/myApply">审批流程</router-link>
              </div>
              <br />
              <span id="a">行政管理</span> <br />
              <div>
                <a href="">仓库管理</a>
                <a href="">印章管理</a>
                <a href="">车辆管理</a>
                <a href="">图书管理</a>
                <a href="">证照管理</a>
                <a href="">办公用品</a>
                <a href="">成本预算</a>
              </div>
              <span id="a">协作沟通</span> <br />
              <div>
                <a href="">问卷调查</a>
                <a href="">通讯录</a>
                <a href="">新闻管理</a>
                <a href="">公告管理</a>
                <router-link to="/home/newmail">内部邮件</router-link>
                <router-link to="/home/newmail">外部邮件</router-link>
                <a href="">手机短信</a>
              </div>

              <span id="a">工作安排</span> <br />
              <div id="a">
                <a href="">日程计划</a>
                <a href="">任务管理</a>
                <a href="">会议管理</a>
              </div>
              <br />
              <span id="a">人事安排</span> <br />
              <div id="a">
                <a href="">考勤管理</a>
                <a href="">绩效考核</a>
                <a href="">会议管理</a>
              </div>
              <br />
              <div id="a">
                <router-link to="/home/businessinfo">系统设置</router-link>
              </div>
            </div>
          </el-drawer>
   
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
          <el-button class="icon" style="color:blue" icon="el-icon-s-grid" circle> </el-button>
          <el-button class="icon" style="color:red"  icon="el-icon-message-solid" circle></el-button>
          <el-button class="icon"  icon="el-icon-s-finance" circle></el-button>
        
          <el-avatar style="top:10px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>&nbsp;&nbsp;
            <th>超级管理员</th>
         
          <el-button class="icon"  icon="el-icon-s-comment" circle></el-button>
        </tr>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
    name: "Header",

  data() {
    return {
      drawer: false,
      direction: "ltr",


      activities: [
        {
          content: "新建流程",
          size: "large",
          type: "primary",
          icon: "el-icon-s-data",
        },
        {
          content: "预约会议",
          size: "large",
          type: "primary",
          icon: "el-icon-c-scale-to-origina",
        },
        {
          content: "新建邮件",
          size: "large",
           type: "primary",
          icon: "el-icon-s-finance",
        },
        {
          content: "查看新闻",
          size: "large",
          type: "primary",
          icon: "el-icon-s-platform",
        },
      ],
    };
  },
  methods: {

    
    activities: [{
          content: '新建流程',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        },{content: '预约会议',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
          
        },{content: '新建邮件',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
          
        },{content: '查看新闻',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
          
        }]
        
  },
  methods: {
   
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    handleClose(done) {
      done();
    },
    errorHandler() {
        return true
      }
  },
};
</script>

<style>
    .el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.icon{
 font-size: 20px;
  font-weight: bold
}
.el-dropdown-menu{
  width: 130px;
  text-align: center;
  font-size: 12px;
  top: 100px;
}
.el-timeline-item{
  margin: 20px;
}
</style>